<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>web-ui-color</title>
</head>
<link href="styles/960.css" rel="stylesheet" type="text/css"/>
<link href="styles/webui.css" rel="stylesheet" type="text/css"/>
<link href="styles/gh-buttons.css" rel="stylesheet" type="text/css"/>

<style type="text/css">
 
  .colorbox{
	  height:50px;  
	   font-family:Arial;
  }
  
  .color{
	  height:30px;  
  }
  
   .colorbox p{
	  height:20px;
	  line-height:20px;
	  text-align:center;
	  background:#fff;   
	}

</style>
<body  class="graybg-l2">
<div class="container_12">

	<div class="head  macbg2 grid_12">
    		<div class="logo grid_8 alpha">
            	<h1 class="white">WebUI-FrameWork</h1>
            </div>
             <div class="grid_4 omega">
            	<ul  class=" linkbar white">
                   <li><a href="#">welcome: Mr </a></li>
                    <li><a href="#" class="orange-l1">my account </a></li>
                    <li><span>my account </span></li>
                </ul>
            </div>
    </div>
    
    <div class="clear"></div>
    <div class="spacer"></div>  
    
    <div class="panel-open grid_12">
    	<div class="phead  red"><h1>颜色样例</h1></div>
        <div class="pcontent">
        
       	  <div class="grid_2 colorbox alpha">
            <div class="color redbg">&nbsp;</div>
              <p>redbg #cc0000</p>
            </div>
          <div class="grid_2 colorbox">
            <div class="color redbg-l1">&nbsp;</div>
              <p>redbg-l1 #ff3019</p>
            </div>
          <div class="grid_2 colorbox">
            <div class="color redbg-l2">&nbsp;</div>
              <p>redbg-l2 #ff5c5c</p>
            </div>
          <div class="grid_2 colorbox">
            <div class="color redbg-d1">&nbsp;</div>
             <p>redbg-d1 #a90329</p>
            </div>
          <div class="grid_2 colorbox">
            <div class="color redbg-d2">&nbsp;</div>
              <p>redbg-d2 #6d0019</p>
            </div>
            <div class="grid_2 colorbox omega">
                <div class="color graybg">&nbsp;</div>
                <p>graybg</p>
            </div>
           
           
             <div class="clear"></div>
    		 <div class="spacer"></div>   
            
          <div class="grid_2 colorbox alpha">
            <div class="color autumnbg">&nbsp;</div>
              <p>autumnbg #c8640e</p>
            </div>
          <div class="grid_2 colorbox">
            <div class="color autumnbg-l1">&nbsp;</div>
              <p>autumnbg-l1 #F4AD45</p>
            </div>
          <div class="grid_2 colorbox">
            <div class="color autumnbg-l2">&nbsp;</div>
              <p>autumnbg-l2 #febf04</p>
            </div>
          <div class="grid_2 colorbox">
            <div class="color autumnbg-d1">&nbsp;</div>
             <p>autumnbg-d1 #a3460b</p>
            </div>
          <div class="grid_2 colorbox">
            <div class="color autumnbg-d2">&nbsp;</div>
              <p>autumnbg-d2 #722104</p>
            </div>
            <div class="grid_2 colorbox omega">
                <div class="color graybg-l1">&nbsp;</div>
                <p>graybg-l1</p>
            </div>
            
            
            
             <div class="clear"></div>
    		 <div class="spacer"></div>   
            
          <div class="grid_2 colorbox alpha">
            <div class="color orangebg">&nbsp;</div>
              <p>orangebg #ff7b0d</p>
            </div>
          <div class="grid_2 colorbox">
            <div class="color orangebg-l1">&nbsp;</div>
              <p>orangebg-l1 #ffaf4b</p>
            </div>
          <div class="grid_2 colorbox">
            <div class="color orangebg-l2">&nbsp;</div>
              <p>orangebg-l2 #ffb76b</p>
            </div>
          <div class="grid_2 colorbox">
            <div class="color orangebg-d1">&nbsp;</div>
             <p>orangebg-d1 #ff7400</p>
            </div>
          <div class="grid_2 colorbox">
            <div class="color orangebg-d2">&nbsp;</div>
              <p>orangebg-d2 #ff670f</p>
            </div>
            <div class="grid_2 colorbox omega">
                <div class="color graybg-l1">&nbsp;</div>
                <p>graybg-l1</p>
            </div>
            
            
            
            
              <div class="clear"></div>
    		 <div class="spacer"></div>   
            
          <div class="grid_2 colorbox alpha">
            <div class="color pinkbg">&nbsp;</div>
              <p>pinkbg #ff5db1</p>
            </div>
          <div class="grid_2 colorbox">
            <div class="color pinkbg-l1">&nbsp;</div>
              <p>pinkbg-l1 #ff7cd8</p>
            </div>
          <div class="grid_2 colorbox">
            <div class="color pinkbg-l2">&nbsp;</div>
              <p>pinkbg-l2 #FFADE6</p>
            </div>
          <div class="grid_2 colorbox">
            <div class="color pinkbg-d1">&nbsp;</div>
             <p>pinkbg-d1 #ef017c</p>
            </div>
          <div class="grid_2 colorbox">
            <div class="color pinkbg-d2">&nbsp;</div>
              <p>pinkbg-d2 #c10264</p>
            </div>
            <div class="grid_2 colorbox omega">
                <div class="color graybg-d2">&nbsp;</div>
                <p>graybg-d1</p>
            </div>
            
            
            
            
            
            
            
            
            
            
             <div class="clear"></div>
    		 <div class="spacer"></div>   
            
          <div class="grid_2 colorbox alpha">
            <div class="color greenbg">&nbsp;</div>
              <p>greenbg #299a0b</p>
            </div>
          <div class="grid_2 colorbox">
            <div class="color greenbg-l1">&nbsp;</div>
              <p>greenbg-l1 #6bba70</p>
            </div>
          <div class="grid_2 colorbox">
            <div class="color greenbg-l2">&nbsp;</div>
              <p>greenbg-l2 #a9db80</p>
            </div>
          <div class="grid_2 colorbox">
            <div class="color greenbg-d1">&nbsp;</div>
             <p>greenbg-d1 #006e2e</p>
            </div>
          <div class="grid_2 colorbox">
            <div class="color greenbg-d2">&nbsp;</div>
              <p>greenbg-d2 #0B5426</p>
            </div>
            <div class="grid_2 colorbox omega">
                <div class="color graybg-l2">&nbsp;</div>
                <p>graybg-l2</p>
            </div>
            
            
            
            <div class="clear"></div>
    		 <div class="spacer"></div>   
            
          <div class="grid_2 colorbox alpha">
            <div class="color greenbg2">&nbsp;</div>
              <p>greenbg2 #80AC3A</p>
            </div>
          <div class="grid_2 colorbox">
            <div class="color greenbg2-l1">&nbsp;</div>
              <p>greenbg2-l1 #8fc400</p>
            </div>
          <div class="grid_2 colorbox">
            <div class="color greenbg2-l2">&nbsp;</div>
              <p>greenbg2-l2 #b6e026</p>
            </div>
          <div class="grid_2 colorbox">
            <div class="color greenbg2-d1">&nbsp;</div>
             <p>greenbg2-d1 #73880a</p>
            </div>
          <div class="grid_2 colorbox">
            <div class="color greenbg2-d2">&nbsp;</div>
              <p>greenbg2-d2 #41660E</p>
            </div>
            <div class="grid_2 colorbox omega">
                <div class="color graybg-d1">&nbsp;</div>
                <p>graybg-d1</p>
            </div>
            
            
            
            
             <div class="clear"></div>
    		 <div class="spacer"></div>   
            
          <div class="grid_2 colorbox alpha">
            <div class="color greenbg3">&nbsp;</div>
              <p>greenbg3 #378680</p>
            </div>
          <div class="grid_2 colorbox">
            <div class="color greenbg3-l1">&nbsp;</div>
              <p>greenbg3-l1 #4ca297</p>
            </div>
          <div class="grid_2 colorbox">
            <div class="color greenbg3-l2">&nbsp;</div>
              <p>greenbg3-l2 #92d0c8</p>
            </div>
          <div class="grid_2 colorbox">
            <div class="color greenbg3-d1">&nbsp;</div>
             <p>greenbg3-d1 #1e6464</p>
            </div>
          <div class="grid_2 colorbox">
            <div class="color greenbg3-d2">&nbsp;</div>
              <p>greenbg3-d2 #105457</p>
            </div>
            <div class="grid_2 colorbox omega">
                <div class="color graybg-d1">&nbsp;</div>
                <p>graybg-d1</p>
            </div>
            
            
            
            
            <div class="clear"></div>
    		 <div class="spacer"></div>   
            
          <div class="grid_2 colorbox alpha">
            <div class="color earthbg">&nbsp;</div>
              <p>earthbg #bf8b3f</p>
            </div>
          <div class="grid_2 colorbox">
            <div class="color earthbg-l1">&nbsp;</div>
              <p>earthbg-l1 #d19d50</p>
            </div>
          <div class="grid_2 colorbox">
            <div class="color earthbg-l2">&nbsp;</div>
              <p>earthbg-l2 #daae6e</p>
            </div>
          <div class="grid_2 colorbox">
            <div class="color earthbg-d1">&nbsp;</div>
             <p>earthbg-d1 #A87833</p>
            </div>
          <div class="grid_2 colorbox">
            <div class="color earthbg-d2">&nbsp;</div>
              <p>earthbg-d2 #8E5502</p>
            </div>
            <div class="grid_2 colorbox omega">
                <div class="color graybg-d2">&nbsp;</div>
                <p>graybg-d1</p>
            </div>
            
            
            <div class="clear"></div>
    		 <div class="spacer"></div>   
            
          <div class="grid_2 colorbox alpha">
            <div class="color coffeebg">&nbsp;</div>
              <p>coffeebg #67594e</p>
            </div>
          <div class="grid_2 colorbox">
            <div class="color coffeebg-l1">&nbsp;</div>
              <p>coffeebg-l1 #7f6d5f</p>
            </div>
          <div class="grid_2 colorbox">
            <div class="color coffeebg-l2">&nbsp;</div>
              <p>coffeebg-l2 #928072</p>
            </div>
          <div class="grid_2 colorbox">
            <div class="color coffeebg-d1">&nbsp;</div>
             <p>coffeebg-d1 #55483f</p>
            </div>
          <div class="grid_2 colorbox">
            <div class="color coffeebg-d2">&nbsp;</div>
              <p>coffeebg-d2 #41372e</p>
            </div>
            <div class="grid_2 colorbox omega">
                <div class="color graybg-d2">&nbsp;</div>
                <p>graybg-d1</p>
            </div>
            
            
            
            
            
            <div class="clear"></div>
    		 <div class="spacer"></div>   
            
          <div class="grid_2 colorbox alpha">
            <div class="color bluebg">&nbsp;</div>
              <p>bluebg #105497</p>
            </div>
          <div class="grid_2 colorbox">
            <div class="color bluebg-l1">&nbsp;</div>
              <p>bluebg-l1 #448ACD</p>
            </div>
          <div class="grid_2 colorbox">
            <div class="color bluebg-l2">&nbsp;</div>
              <p>bluebg-l2 #6A9CCD</p>
            </div>
          <div class="grid_2 colorbox">
            <div class="color bluebg-d1">&nbsp;</div>
             <p>bluebg-d1 #264A6D</p>
            </div>
          <div class="grid_2 colorbox">
            <div class="color bluebg-d2">&nbsp;</div>
              <p>bluebg-d2 #04315C</p>
            </div>
            <div class="grid_2 colorbox omega">
                <div class="color graybg-d2">&nbsp;</div>
                <p>graybg-d1</p>
            </div>
            
            
            
            <div class="clear"></div>
    		 <div class="spacer"></div>   
            
          <div class="grid_2 colorbox alpha">
            <div class="color skybg">&nbsp;</div>
              <p>skybg #2cafe3</p>
            </div>
          <div class="grid_2 colorbox">
            <div class="color skybg-l1">&nbsp;</div>
              <p>skybg-l1 #7AD8F4</p>
            </div>
          <div class="grid_2 colorbox">
            <div class="color skybg-l2">&nbsp;</div>
              <p>skybg-l2 #a9e4f7</p>
            </div>
          <div class="grid_2 colorbox">
            <div class="color skybg-d1">&nbsp;</div>
             <p>skybg-d1 #4096ee</p>
            </div>
          <div class="grid_2 colorbox">
            <div class="color skybg-d2">&nbsp;</div>
              <p>skybg-d2 #207ce5</p>
            </div>
            <div class="grid_2 colorbox omega">
                <div class="color graybg-d2">&nbsp;</div>
                <p>graybg-d1</p>
            </div>
            
            
             <div class="clear"></div>
    		 <div class="spacer"></div>   
            
          <div class="grid_2 colorbox alpha">
            <div class="color bluegraybg">&nbsp;</div>
              <p>bluegraybg #6393C1</p>
            </div>
          <div class="grid_2 colorbox">
            <div class="color bluegraybg-l1">&nbsp;</div>
              <p>bluegraybg-l1 #85b2d3</p>
            </div>
          <div class="grid_2 colorbox">
            <div class="color bluegraybg-l2">&nbsp;</div>
              <p>bluegraybg-l2 #d4e4ef</p>
            </div>
          <div class="grid_2 colorbox">
            <div class="color bluegraybg-d1">&nbsp;</div>
             <p>bluegraybg-d1 #4f85bb</p>
            </div>
          <div class="grid_2 colorbox">
            <div class="color bluegraybg-d2">&nbsp;</div>
              <p>bluegraybg-d2 #356aa0</p>
            </div>
            <div class="grid_2 colorbox omega">
                <div class="color graybg-d2">&nbsp;</div>
                <p>graybg-d1</p>
            </div>
            
            
            
            <div class="clear"></div>
    		 <div class="spacer"></div>   
            
          <div class="grid_2 colorbox alpha">
            <div class="color graybluebg">&nbsp;</div>
              <p>graybluebg #656678</p>
            </div>
          <div class="grid_2 colorbox">
            <div class="color graybluebg-l1">&nbsp;</div>
              <p>graybluebg-l1 #8788a0</p>
            </div>
          <div class="grid_2 colorbox">
            <div class="color graybluebg-l2">&nbsp;</div>
              <p>graybluebg-l2 #b7b8c9</p>
            </div>
          <div class="grid_2 colorbox">
            <div class="color graybluebg-d1">&nbsp;</div>
             <p>graybluebg-d1 #4f4e60</p>
            </div>
          <div class="grid_2 colorbox">
            <div class="color graybluebg-d2">&nbsp;</div>
              <p>graybluebg-d2 #393848</p>
            </div>
            <div class="grid_2 colorbox omega">
                <div class="color graybg-d2">&nbsp;</div>
                <p>graybg-d1</p>
            </div>
           
            
            
            
 
            
        
            
        </div>
    </div>
    
    
 
      
      
      <div class="clear"></div>
      <div class="spacer"></div>  
      
      <div class="grid_12 foot macbg2"  >
             <p><a href="#">welcome: Mr </a>  |  <a href="#" class="orange-l1">my account </a> | <span>my account </span></p>
             <p class="white">copy rights  汉龙数码科技有限公司2001－2011</p>
      </div>
      <div class="clear"></div>
       <div class="spacer"></div>
      
</div><!--end container-->


</body>
</html>
